// 1.老版的转换
const babel = require("@babel/core");
const sourceCode = `<h1 id="title" key="title" ref="title">hello</h1>`;
const result = babel.transform(sourceCode, {
    plugins: [['@babel/plugin-transform-react-jsx',{runtime:'classic'}]]
});
console.log(result.code);
/* 
===>
React.createElement("h1", {
    id: "title",
    key: "title",
    ref: "title"
  }, "hello");
*/
let React = require('react'); //重点老版需要引入React
let element = React.createElement("h1", {
    id: "title",
    key: "title",
    ref: "title"
  }, "hello");
console.log(JSON.stringify(element,replacer,2));
function replacer(key,value){
    if(!['_owner','_store'].includes(key))
        return value;
}
/* 
===>
{
    "type": "h1",
    "key": "title",
    "ref": "title",
    "props": {
      "id": "title",
      "children": "hello"
    }
}
 */

// 2.新版转换
const result1 = babel.transform(sourceCode, {
   plugins: [['@babel/plugin-transform-react-jsx',{runtime:'automatic'}]]
});
console.log(result1.code);
/* 
===>
import { jsx as _jsx } from "react/jsx-runtime";

_jsx("h1", {
  id: "title",
  ref: "title",
  children: "hello"
}, "title"); 
*/

let {jsx:_jsx} = require("react/jsx-runtime"); //重点：新版不需要在文件中引入react
let element1 = _jsx("h1", {id: "title",key:"title",ref:"title",children: "hello"}, "title");
console.log(JSON.stringify(element1,replacer,2));
function replacer(key,value){
    if(!['_owner','_store'].includes(key))
        return value;
}
/* 
===>
{
    "type": "h1",
    "key": "title",
    "ref": "title",
    "props": {
      "id": "title",
      "children": "hello"
    }
} 
*/